<template>
  <div style="height:100%;width:100%;">
    <div class="radarCanvas" style="height:100%;width:100%;"></div>
  </div>
</template>

<script>
export default {
  name: "radar",
  props: {
    radarData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    addData:{
      type: Object,
      default(){
        return {};
      }
    }
  },
  watch:{
    radarData(val){
      this.getRadar(val);
    },
    addData(val){
      this.getRadar(this.radarData,val);
    }
  },
  mounted() {
    this.getRadar(this.radarData);
  },
  methods: {
    getRadar(val,addData) {
      console.log(val);
      let maxValue = Math.max.apply(null, val.parentData);
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".radarCanvas"));
      let option = {
        color:['#f4c178','#f3707c'],
        legend: {
          show: true,
          top: "bottom",
          itemGap: 20,
          itemHeight: 8,
          textStyle: {
            color: "#666666",
            fontSize: 12
          },
          data: [
            {
              name: "权重",
              // icon: "image:///PC_budgetCMS/static/image/rect1.png",
              icon: "image:///static/image/rect1.png",
              // icon: "triangle",
              // color:'#6a82fd'
            },
            {
              name: val.parentName,
              // icon: "image:///PC_budgetCMS/static/image/rect1.png",
              // icon: "image:///static/image/rect2.png"
              icon: "circle",
                // color:'#f3707c'
            },

          ]
        },
        tooltip: {
          trigger: "item"
        },
        radar: {
          name: {
            textStyle: {
              color: "#666666"
            }
          },
          splitNumber: 4,
          splitArea: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ["#f4c178"]
            }
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: "#f4c178"
            }
          },
          indicator: [
            { name: "收入完成", max: maxValue },
            { name: "主量发展", max: maxValue },
            { name: "发展方式", max: maxValue },
            { name: "客户经营", max: maxValue },
            { name: "用户质态", max: maxValue },
          ]
        },
        series: [
          {
            type: "radar",
            symbol: "none",
            lineStyle: {
              normal: {
                width: 0.8,

              }
            },
            data: [
              {
                value: [20,20,20,20,20],
                name: "权重",
                lineStyle: {
                  normal: {
                    color: "#f4c178",
                    type: "dashed"
                  }
                },
                areaStyle: {
                    normal: {
                      opacity: 0,
                    }
                  },
              },
              {
                value: val.parentData,
                lineStyle: {
                  color: "#f3707c"
                },
                areaStyle: {
                    normal: {
                      type: "default",
                      color: "#f3707c",
                      opacity: 0.4,
                    }
                  },
                name: val.parentName,
              },

            ]
          }
        ]
      };
      if(addData && addData.data){
        option.color.push('#6a82fd')
        option.legend.data.push(
          {
            name: addData.areaName,
            // icon: "image:///PC_budgetCMS/static/image/rect1.png",
            icon: 'circle',
          })
        option.series[0].data.push(
          {
            value: addData.data,
            lineStyle: {
              color: "#6a82fd"
            },
            areaStyle: {
              normal: {
                type: "default",
                color: "#6a82fd",
                opacity: 0.4,
              }
            },
            name: addData.areaName
          })
      }

      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>
